<template>
  <div>
    <ocean :use="form"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useForm } from '@/ocean';
import { ref } from 'vue';
import { GlobalAPI, UserAPI } from '@/app/api';

type Model = {
  username: string,
  password: string,
  mobile: string,
  storeId: number,
}

let props = defineProps<{
  row?: Model,
}>()

let isEdit = !!props.row;

let storeList = ref([]);

let form = useForm<Model>();
form.item('账号', 'username').input({ disabled: isEdit });
form.item('密码', 'password').input();
form.item('手机号', 'mobile').input();
form.item('门店', 'storeId').select({ options: storeList, labelField: 'storeName', valueField: 'id' });

let submitAPI = UserAPI.addUserByAdmin;

if (isEdit) {
  submitAPI = UserAPI.updateUser;
  form.setModel(props.row)
}

GlobalAPI.queryAllStoreList().then(data => storeList.value = data);

const submit = () => {
  return submitAPI(form.model);
}

defineExpose({ submit });
</script>